<template>
	<div class="dept-default">
		<div class="dept__input">
			<el-input placeholder="请输入内容" v-model="inputVal" class="el-input--radius" prefix-icon="el-icon-search" size="medium" readonly-ui="readonly" />
		</div>

		<div class="member__line">
		</div>
		<div class="scroller">
			<slot name="top"></slot>
			<el-tree v-bind="$attrs" :props="defaultProps" :filter-node-method="filterNode" :expand-on-click-node="false" ref="tree1">
				<template v-slot="{ data }">
					<el-checkbox class="item" v-if="showCheckbox" @change="nodeClick(data)" @click.stop :value="value.includes(data[defaultProps.value])">
						<slot :data="data">
							{{ data[defaultProps.label]}}
						</slot>
					</el-checkbox>
					<el-radio class="item" @change="nodeClick(data)" :label="data[defaultProps.value]" :value="value" v-else>
						<slot :data="data">
							{{ data[defaultProps.label]}}
						</slot>
					</el-radio>
				</template>
			</el-tree>
		</div>
	</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Ref, Watch } from 'vue-property-decorator';
@Component({
  name: 'selectTree',
  components: {}
})
export default class extends Vue {
  @Ref() public tree1: any;
  @Prop() public value!: any;
  @Prop(Boolean) public showCheckbox!: any;
  @Prop({ default: () => ({ value: 'id', label: 'name' }) }) public defaultProps!: any;
  private inputVal = '';
  @Watch('inputVal')
  private valueInput (val: any) {
    this.tree1.filter(val);
  }

  private filterNode (value: any, data: any) {
    if (!value) {
      return true;
    }
    const str = (this.defaultProps && this.defaultProps.label) || 'name';
    return data[str].indexOf(value) !== -1;
  }

  private nodeClick (item) {
    if (item.disabled) {
      return false;
    }
    const id = item[this.defaultProps.value];
    if (this.showCheckbox) {
      const arr = [...this.value];
      const index = arr.indexOf(id);
      if (index !== -1) {
        arr.splice(index, 1);
      } else {
        arr.push(id);
      }
      this.$emit('handleCheckChange', arr);
    } else {
      this.$emit('handleClickNode', id);
    }
  }
}
</script>
<style lang="stylus" scoped>
.dept-default {
	height 280px
	overflow-y auto
	position relative
	padding-bottom 12px
	.member__line {
		width 100%
		height 1px
		background #000000
		opacity 0.05
		position absolute
		top 58px
	}
	.dept__input {
		padding 12px
	}
}
.item {
	/deep/.el-checkbox__input {
		float left
		margin-top 2px
	}
}
.scroller {
	max-height 200px
	overflow-y auto
	padding 12px 12px 0 12px
}
.dyanmic-item {
	display flex
	height 40px
	align-items center
}
</style>
